<template>
  <div class="advise">
    <div class="advise_text_scroll">
      <div class="advise_kuang">
        <div class="cicle_tu">
          <div class="ui_clr_1F1F44 ui_fs28 advise_bingtuText ui_fw_700">
            本月您的智慧生活综合情况为：
          </div>
          <!-- 柱状图开始 -->
          <div class="advise_bingtu">
            <v-chart
              force-fit="true"
              :height="height"
              :padding="padding"
              :data="data"
              :scale="scale"
            >
              <v-tooltip />
              <v-axis
                :dataKey="axis1Opts.dataKey"
                :line="axis1Opts.line"
                :tickLine="axis1Opts.tickLine"
                :grid="axis1Opts.grid"
                :label="label"
              />
              <v-axis
                :dataKey="axis2Opts.dataKey"
                :line="axis2Opts.line"
                :tickLine="axis2Opts.tickLine"
                :grid="axis2Opts.grid"
                :label="null"
              />
              <!-- <v-legend dataKey="user" marker="circle" :offset="30" /> -->
              <v-coord type="polar" :radius="0.8" />
              <v-line position="item*score" color="user" :size="2" />
              <v-point
                position="item*score"
                color="user"
                :size="4"
                shape="circle"
              />
              <v-area position="item*score" color="user" />
            </v-chart>
          </div>
          <!-- 柱状图结束 -->
        </div>
      </div>
      <!-- todo... 整体的垂直居中显示、 -->
      <div class="advise_text ui_clr_1F1F44">
        <div class="ui_fs40 ui_mb32 ui_fw_700 ui_family_Medium">建议</div>
        <div v-for="(value, name) in showText" :key="name" class="ui_mb40">
          <div class="ui_fs32 advise_title ui_fw_700 ui_family_Medium">
            <span class="circle"></span>&nbsp;{{ mapText[name] }}：
          </div>
          <ul class="ui_fs28 ui_mt15 ui_lh45 advise_hack_ul">
            <li v-for="(val, index) in value" :key="index">{{ val }}</li>
          </ul>
        </div>
      </div>
    </div>
    <yd-button
      size="large"
      type="primary"
      shape="circle"
      bgcolor="#267AFF"
      color="#fff"
      @click.native="share2"
      class="share ui_fs32 ui_fw_700 ui_family_Medium"
      :class="{ ui_hide: moreShow }"
      >分享我的称号</yd-button
    >
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')
const height = 280
function iseq5() {
  // let userAgent = window.navigator.userAgent
  // let devicePixelRatio = window.devicePixelRatio
  let width = window.screen.width
  let height = window.screen.height
  if (height == 568 && width == 320) {
    // console.log("iPhone5");
    return true
  } else {
    return false
  }
}
const scale = [
  {
    alias: '销售量',
    dataKey: 'score',
    min: 0,
    max: 100
  }
]
const label = {
  textStyle: {
    fill: '#1f1f44',
    fontSize: 14
  }
}
const axis1Opts = {
  dataKey: 'item',
  line: null,
  tickLine: null,
  grid: {
    // type: 'polygon',
    lineStyle: {
      lineDash: null
      // stroke:'#267AFF',
      // strokeOpacity:0.3
    }
    // hideFirstLine: false,
  }
}
const axis2Opts = {
  dataKey: 'score',
  line: null,
  tickLine: null,
  grid: {
    type: 'polygon',
    // lineDash:[0,0],
    lineStyle: {
      lineDash: null,
      fill: '#A7D5FF',
      fillOpacity: 0.3,
      stroke: '#267AFF',
      strokeOpacity: 0.3
    },
    hideFirstLine: false
  }
}
const text = {
  air: [
    '空气质量尤为重要，建议您使用空气净化器改善空气',
    '您家室内空气较差时，请使用空气净化器提升室内空气质量；'
  ],
  water: [
    '您周边环境的水质TDS较高时，建议使用美的净水设备，降低TDS值，提升水质纯度；',
    '饮水时，请使用您的净水设备，提升水质纯度；'
  ],
  humidity: [
    [
      '当室外湿度较为潮湿时，建议使用除湿器或空调的抽湿功能，也可开窗通风；',
      '当室外湿度较为干燥时，建议您使用加湿器提高空气湿度；'
    ],
    [
      '当室内湿度较为潮湿时，您可使用除湿器或空调的抽湿功能，也可开窗通风；',
      '当室内湿度较为干燥时，您可以使用加湿器提高空气湿度；'
    ]
  ],
  security: [
    '建议您开启设备的故障消息通知，及时获取设备异常消息；',
    '建议您及时查看设备消息提醒；'
  ],
  energy: [
    '您在使用电热水器时，可在设备控制页开启“智能云管家”，为您节省电量；',
    '您使用空调制冷时，可在设备控制页开启节能功能，为您节省电量；'
  ]
}
const mapText = {
  air: '空气',
  water: '水质',
  humidity: '湿度',
  energy: '节能',
  security: '安防'
}
export default {
  created() {
    this.height = iseq5() ? 250 : 280
  },
  props: {
    fiveGrade: {
      type: Object,
      default: function() {
        return {
          env: 0,
          food: 0,
          energy: 0,
          intelligent: 0,
          security: 0
        }
      }
    },
    sortedObjKeys: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Array | Object
    },
    energyAndOr: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Number | String,
      default: 0
    },
    envBestType: {
      type: Object,
      required: true,
      default: () => ({
        air: {
          maxPercent: 0
        },
        humidity: {
          maxPercent: 0
        },
        water: {
          maxPercent: 0
        }
      })
    },
    securityData: {
      type: Object,
      default: function() {
        return {
          secRemOpenSwitchNum: {},
          secAppNum: {}
        }
      }
    },
    resultPage: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Number | String
    },
    resultEnv: {
      type: String,
      default: ''
    },
    moreShow: {
      type: Boolean
    }
  },
  data() {
    return {
      mapText,
      scale,
      padding: [76, 20, 20, 10],
      axis1Opts,
      axis2Opts,
      label,
      height: 280
      // showText:{
      //   air:[],
      //   water:[]
      // }
    }
  },
  computed: {
    data() {
      const sourceData = [
        { item: '美食', a: this.fiveGrade.food },
        { item: '智能', a: this.fiveGrade.intelligent },
        { item: '安防', a: this.fiveGrade.security },
        { item: '节能', a: this.fiveGrade.energy },
        { item: '环境', a: this.fiveGrade.env }
      ]
      const dv = new DataSet.View().source(sourceData)
      dv.transform({
        type: 'fold',
        fields: ['a'],
        key: 'user',
        value: 'score'
      })
      return dv.rows
    },
    showText() {
      let text = {}
      // 排名最低的2位
      let key = [this.sortedObjKeys[0], this.sortedObjKeys[1]]
      // let key = ['air', 'humidity'];
      key.forEach(item => {
        if (item == 'air') {
          let t = this.tsAirText()
          if (t) {
            text.air = [...t]
          }
        } else if (item == 'water') {
          // text.water = [...this.tsWaterText()];
          let t = this.tsWaterText()
          if (t) {
            text.water = [...t]
          }
        } else if (item == 'humidity') {
          // text.humidity = [...this.tsHumText()];
          let t = this.tsHumText()
          if (t) {
            text.humidity = [...t]
          }
        } else if (item == 'energy') {
          let flag = this.tsEnergyText()
          if (flag) {
            text.energy = [...flag]
          }
        } else if (item == 'security') {
          text.security = [...this.tsSecurityText()]
        }
      })

      return text
    }
  },
  methods: {
    share2() {
      this.$Bus.$emit('bus_share')
      console.log('share..............')
      // const resultPage  = this.resultPage;
      // this.$router.push({name:'poster', query:{tag: resultPage,envText:this.resultEnv }})
    },
    // 空气文案展示逻辑
    tsAirText() {
      console.log('air', this.envBestType.air.isBad)
      // if(this.envBestType.air.isBad){
      return [text.air[this.envBestType.air.hasSb]]
      // }else{
      //   return false;
      // }
    },
    // 水质文案展示逻辑
    tsWaterText() {
      // if(this.envBestType.water.isBad){
      return [text.water[this.envBestType.water.hasSb]]
      // }else{
      //   return false;
      // }
    },
    // 湿度文案展示逻辑
    tsHumText() {
      // if(this.envBestType.humidity.isBad){
      return [...text.humidity[this.envBestType.humidity.hasSb]]
      // }else{
      //   return false;
      // }
    },
    // 节能文案展示逻辑
    tsEnergyText() {
      // 同时有
      if (this.energyAndOr == 1) {
        return [...text.energy]
      } else if (this.energyAndOr == 2) {
        // 电热水器
        return [text.energy[0]]
      } else if (this.energyAndOr == 3) {
        // 空调
        return [text.energy[1]]
      } else {
        return false
      }
    },
    // 安防文案展示逻辑
    tsSecurityText() {
      if (Number(this.securityData.secAppSwitchRate.value) >= 80) {
        return [text.security[1]]
      } else {
        return [text.security[0]]
      }
    }
  },
  mounted() {
    // this.bingtu();
  }
}
</script>
<style lang="scss" scoped>
.advise_text_scroll {
  max-height: 100%;
  overflow-y: auto;
  position: relative;
  padding-bottom: calc(4vh + 92px);
}
.share {
  position: absolute;
  bottom: 4vh;
  width: 80%;
  left: 50%;
  transform: translate(-50%);
  box-sizing: border-box;
  height: 92px;
  z-index: 8;
}
.circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  line-height: 32px;
  border-radius: 50%;
  background: #000;
  vertical-align: middle;
}
.advise_title {
  line-height: 48px;
  vertical-align: middle;
}
.absTitle {
  position: absolute;
}
.advise_text {
  position: relative;
  padding: 0 48px;
  width: 100%;
  margin-top: 45px;
}
.advise_kuang {
  /* padding:64px 48px 80px 48px; */
  position: relative;
  margin-top: 64px;
  width: 656px;
  height: 564px;
  left: 50%;
  transform: translate(-50%);
}
.cicle_tu {
  background-image: url('../../assets/image/summary_img_data_bg@2x.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  /* // top: 50%;
    // margin-top:30px; */
  box-sizing: border-box;
}
.advise_bingtu {
  position: absolute;
  top: 0;
  width: 656px;
  height: 564px;
  margin: 0 auto;
}
.advise_bingtuText {
  padding-top: 48px;
  padding-left: 40px;
}
.advise {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(#e5eeff, #a7d5ff);
}
.more {
  position: absolute;
  z-index: 999;
  bottom: 48px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  text-align: center;
  -webkit-animation: start 1.2s infinite ease-in-out;
}
.moreText {
  position: absolute;
  z-index: 999;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  color: #1f1f44;
}
@-webkit-keyframes start {
  0%,
  30% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -8px);
  }
}
@-moz-keyframes start {
  0%,
  30% {
    opacity: 0;
    -moz-transform: translate(0, 10px);
  }
  60% {
    opacity: 1;
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -moz-transform: translate(0, -8px);
  }
}
@keyframes start {
  0%,
  30% {
    opacity: 0;
    transform: translate(0, 10px);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -8px);
  }
}
/*iPhone5和iPhone SE*/
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
  /*code*/
}

/* iPhone6/7/8 */
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  /*code*/
}

/* iPhone6/7/8 Plus*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
  //  .advise_text {
  //     padding: 0 48px;
  //     left: 0;
  //     bottom:30px;
  //     width: 100%;
  //     top: 660px;
  //   }
  //   .advise_title {
  //     line-height: 30px;
  //     vertical-align:middle;
  //   }
  //   .advise_hack_ul{
  //     line-height: 38px;
  //   }
}

/* iPhoneX*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  /*code*/
}
</style>
